<template>
  <div class="committee_info">
    <!-- <div v-if="committionList.length" class="committee_info"> -->
    <div class="model_title gl_clear">
      <span class="gl_fl">分站赛事</span>
      <span class="title_control gl_fr" @click="actionSheet = !actionSheet">
        <span class="substation_date">{{ activeTime && activeTime.name ? activeTime.name.slice(0, 4) : '' }}年{{ activeTime && activeTime.name ? activeTime.name.slice(5, 7) : '' }}月</span>
        <img class="substation_date_img" src="@/assets/images/league/mb_date.png">
      </span>
    </div>
    <ul>
      <li
        v-for="(item, index) in substationList"
        :key="index"
        style="margin-bottom:5px"
        class="committee_content model_content gl_clear"
      >
        <div class="game_logo_wrap gl_fl" @click="jumpToSubstationHomePage(item)">
          <img class="game_logo" :src="getStaticFileUrl(item.logoImage)">
        </div>
        <div class="game_info_wrap">
          <div class="game_info_title" @click="jumpToSubstationHomePage(item)">
            {{ item.parent ? item.parent.name + '-' : '' }}{{ item.name }}
          </div>
          <div>
            <span
              class="game_info_status"
              :class="{'status_entry': item.statusCode === 'EntryStarted', 'status_notStart': item.statusCode === 'Scheduled'}"
            >
              {{ item.status.name }}
            </span>
          </div>
          <div class="game_info_date">{{ item.startTime ? item.startTime.slice(0, 10) : '' }}</div>
        </div>
      </li>
    </ul>

    <van-action-sheet
      v-model="actionSheet"
      :actions="timeLineList"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionChildren2 // 获取分站赛列表（不需要权限）
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementCompetitionChildren2QO // 获取分站赛列表（不需要权限）
} from '@/lib/form/game/swaggerForm';

export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
      committionList: [],
      actionSheet: false,
      activeTime: {}, // 当前选中的时间节点
      timeLineList: [],
      qo: new Api_GET_EventsManagementCompetitionChildren2QO()
    };
  },
  computed: {
    substationList () {
      return this.activeTime && this.activeTime.name ? this.activeTime.children.slice(0, 3) : [];
    }
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    getPageList() {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      delete _qo.Page;
      delete _qo.SkipCount;
      delete _qo.MaxResultCount;
      _qo.ParentId = this.gameInfo.id;
      _qo.IsPublished = true;
      _qo.HasParent = true;
      // _qo.IsFinal = true;
      _qo.HasFinalQualification = true;
      _qo.IncludeStatus = true;
      // _qo.IncludeType = true;
      // _qo.IncludeApproveStatus = true;
      // _qo.IncludeLevel = true;
      // _qo.IncludeSetting = true;
      // _qo.IncludeReportSetting = true;
      // _qo.IncludeEntryFields = true;
      _qo.IncludeParent = true;
      delete _qo.IsFinal; // 不需要传isFinal, isfinal=true 则只查决赛;isfinal=false 则只查非决赛;不传查所有
      this.apiCompetitionChildren(_qo);
    },
    // 获取分站赛列表（不需要权限）
    apiCompetitionChildren(qo) {
      api_GET_EventsManagementCompetitionChildren2(qo)
        .then(
          res => {
            this.timeLineList = this.formatTimeLineData(res.items);
            const _index = this.chooseActiveTimeLineByCurrentDate(this.timeLineList);
            this.activeTime = this.timeLineList[_index];
          }
        )
        .catch(
          error => {
            console.log(error);
          }
        );
    },
    formatTimeLineData (list) {
      const _timeLineData = {};
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        const _startTime = item.startTime ? item.startTime.slice(0, 7) : '';
        if (_startTime in _timeLineData) {
          _timeLineData[_startTime].children.push(item);
        } else {
          _timeLineData[_startTime] = {
            startTime: _startTime,
            name: _startTime, // 兼容vant-ui
            children: [item]
          };
        }
      }
      const _timeLineList = Object.values(_timeLineData);
      _timeLineList.sort((a, b) => {
        const _aTime = a.startTime;
        const _bTime = b.startTime;
        if (_aTime > _bTime) { return 1; }
        if (_aTime < _bTime) { return -1; }
        return 0;
      });
      return _timeLineList;
    },
    // 根据当前日期选择时间线的选中日期
    chooseActiveTimeLineByCurrentDate (list) {
      const curDate = new Date();
      const curYear = curDate.getFullYear();
      const curMonth = curDate.getMonth() < 9 ? '0' + (curDate.getMonth() + 1) : curDate.getMonth() + 1;
      const curDateStr = curYear + '-' + curMonth;
      let i;
      for (i = 0; i < list.length; i++) {
        const _startTime = list[i].startTime;
        if (curDateStr <= _startTime) return i;
      }
      return --i;
    },
    jumpToSubstationHomePage (item) {
      const _origin = window.location.origin;
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = `${_origin}/mobile.html#/home/${item.route + (item.tenantId ? '_' + item.tenantId : '')}/info`;
      a.target = '_blank';
      a.dispatchEvent(event);
    },
    onSelect (val) {
      this.activeTime = val;
      console.log(val);
    },
    // 获取文件地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style scoped>
.committee_info .committee_content {
  padding: 18px 42px 17px 18px;
}
.committee_info .committee_item {
  font-size: 14px;
  line-height: 20px;
  color: #666666;
  margin-top: 6px;
  box-sizing: border-box;
}
.committee_info .committee_name {
  line-height: 20px;
}
.committee_typeName {
  width: 70px;
  float: left;
}

.title_control {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
}
.substation_date {
  margin-right: 10px;
  vertical-align: middle;
}
.substation_date_img {
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.game_logo_wrap {
  width: 60px;
  height: 60px;
  padding-top: 8px;
}
.game_logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  vertical-align: top;
}
.game_info_wrap {
  margin-left: 97px;
  word-break: break-all;
}
.game_info_title {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
  margin-bottom: 5px;
}
.game_info_status {
  display: inline-block;
  vertical-align: top;
  padding: 1px 10px;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  border-radius: 13px;
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
  background-color: #BDBDBD;
}
.game_info_date {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.status_entry {
  background-color: #1FC100;
}
.status_notStart {
  background-color: #EA7119;
}
</style>
